<template>

  <n-form
    :model="formData"
    :rules="formRules"
    ref="formInstance"
    label-placement="left"
    label-width="80px">
    <n-grid x-gap="12" :cols="1">
      <n-gi responsive="self">
        <n-form-item label="功能名称" path="resourceName">
          <n-input v-model:value="formData.resourceName" placeholder="请输入功能名称" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="功能编码" path="resourceCode">
          <n-input v-model:value="formData.resourceCode" placeholder="请输入功能编码" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="状态">
          <n-radio-group v-model:value="formData.enabled">
            <n-space>
              <n-radio :key="it.value" v-for="it in enabledOptions" :value="it.value"
                       :label="it.label" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi :span="2">
        <n-form-item label="功能描述" path="resourceDescription">
          <n-input type="textarea" v-model:value="formData.resourceDescription"
                   placeholder="请输入功能描述" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="接口依赖">
          <div>
            <n-row>
              <n-button @click="onSelectApi">添加关联接口</n-button>
            </n-row>
            <n-data-table
              :columns="dependOnApiColumns"
              :data="apiList"
              :bordered="false"
            />
          </div>

        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>
<script lang="ts">
import { h, onMounted, ref, unref } from "vue";
import { enabledOptions, formRules } from "./Service";
import httpApi from "../httpApi";
import { FormInst, NButton, NSpace, RowData } from "naive-ui";
import { ApiService } from "../Api/index";
import { checkFormData } from "@/utils/formUtil";

export default {
  name: "SysResourceElmUpdate",
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    readMode: {
      type: [String],
      default: "read"
    },
    fkParentId: {
      type: [String, Number]
    },
    resourceAppCode: {
      type: [String]
    }
  },
  setup: function(props) {
    const formInstance = ref<FormInst | null>(null);
    const { fkParentId, resourceAppCode } = unref(props);
    const dependOnApiColumns = [

      {
        title: "接口名称",
        key: "apiName",
        ellipsis: {
          tooltip: true
        },
        width: 150
      },
      {
        title: "接口编码",
        key: "apiCode",
        ellipsis: {
          tooltip: true
        },
        width: 150
      },
      {
        title: "接口地址",
        key: "apiUri",
        width: 160,
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: "操作",
        key: "id",
        type: "id",
        width: 160,
        render(row: RowData, index: number) {
          return h(NSpace, [
            h(NButton, {
              type: "primary",
              text: true,
              onClick: (async (index) => {
                apiList.value.splice(index, 1);
              }).bind(null, index)
            }, "删除")
          ]);
        }
      }
    ];

    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      resourceAppCode: resourceAppCode,
      fkParentId: fkParentId,
      resourceType: "elm",
      resourceConfig: {
        apiList: []
      }
    });

    async function onSelectApi() {
      const apiIds = await ApiService.doSelectApiModal(apiList.value.map(it => {
        return it.apiId;
      }));
      console.log("选中的API", apiIds);
      await doSelectApiList(apiIds);
    }

    const apiList = ref<any>([]);

    async function doSelectApiList(apiIds: any[]) {
      if (!apiIds || !apiIds.length) {
        return;
      }
      const { data } = await httpApi.selectSysTbResourceByIds(apiIds);
      console.log("返回的数据:{}", data);
      apiList.value = data.map(it => {
        return {
          apiId: it.id,
          apiName: it.resourceName,
          apiCode: it.resourceCode,
          apiUri: it.resourceUrl
        };
      });
      console.log("接口數據", apiList);
    }

    console.log("测试表单默认状态:{}", formData);
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectSysTbResourceById(props.id);
        formData.value = msg.data;
        if (msg.data.resourceConfig != null) {
          const apiIds = msg.data.resourceConfig["apiIdList"];
          await doSelectApiList(apiIds);
        }
      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      formData.value["resourceConfig"].apiIdList = apiList.value.map(it => {
        return it.apiId;
      });
      return httpApi.doSaveSysTbResource(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      formData.value["resourceConfig"].apiIdList = apiList.value.map(it => {
        return it.apiId;
      });
      return httpApi.doUpdateSysTbResource(formData.value);
    };
    onMounted(() => {
      init();
    });
    return {
      enabledOptions,
      dependOnApiColumns,
      formData,
      apiList,
      onSelectApi,
      formInstance,
      formRules,
      doSubmit,
      doUpdate
    };
  }
};
</script>

<style lang="less" scoped></style>
